import React, {useState, useEffect} from 'react';
import {Button, List, Modal, Tag, Empty} from 'antd';
import {getDnsList} from '../service';

const ListItem = List.Item;
const dnsDetailsForm = props => {
  const [listData , setListData] = useState([]);
  const [current, setCurrent] = useState(1);
  const [pageSize, setpageSize] = useState(5);
  const [total, setTotal] = useState();
  const [initLoading, setinitLoading] = useState(true);

  const {
    onCancel: handleUpdateModalVisible,
    updateModalVisible,
    values,
  } = props;

  useEffect(() => {
    const params={
    "domainId":props.values.id,
      "current":current,
      "pageSize":pageSize
  };
    getDnsList(params).then(res => {
      if (res.status === 200) {
          setListData(res.data);
          setTotal(res.total);
          setpageSize(res.pageSize);
          setinitLoading(false);
      }
    });
  }, [current]);

  const renderContent = listData.map((item,index)=>{
    const color = item.status === "ENABLE" ? "green" : "red";
    return (
      <ListItem
        key={index}
        actions={[<a key="list-loadmore-edit">启用</a>, <a key="list-loadmore-more">禁用</a>]}
      >
        <ListItem.Meta
          key={item.key}
          title={item.rr}
          description={`${item.rr }@${props.values.name}`}
        />
        <div  key={item.rr} style={{width:150,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginRight:20}}>{item.value}</div>
        <div  key={`${item.rr}-2`}>
          <Tag color={color} key={item.status}>
            {item.status === 'ENABLE'? '启用':'禁用'}
          </Tag>
        </div>
      </ListItem>

    );
  });

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
      </>
    );
  };

  return (
    <Modal
      key='dnsModal'
      width={680}
      style={{ top: 40 }}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title={`${props.values.name} 解析详情`}
      visible={updateModalVisible}
      footer={renderFooter()}
      onCancel={() => handleUpdateModalVisible()}
    >

      <List
        loading={initLoading}
        itemLayout="horizontal"
        key='dnsList'
        pagination={listData.length>0?{
          onChange: page => {
           setCurrent(page)
          },
          current,
          total,
          showSizeChanger:false,
          size:'small'
        }:false}
        bordered={listData.length>0}
      >
        <div key='dnsListItem'>
          {listData.length>0?renderContent:<Empty/>}
        </div>
      </List>
    </Modal>
  );
};

export default dnsDetailsForm;
